<template>
  <v-chart class="chart h-full" :option="option" autoresize />
</template>

<script lang="ts" name="VisitsChart" setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
import { ref } from 'vue'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  BarChart,
  LineChart,
])

// provide(THEME_KEY, "dark");
// prettier-ignore
const data = [["06-05", 116], ["06-06", 129], ["06-07", 135], ["06-08", 86], ["06-09", 73], ["06-10", 85], ["06-11", 73], ["06-12", 68], ["06-13", 92], ["06-14", 130], ["06-15", 245], ["06-16", 139], ["06-17", 115], ["06-18", 111], ["06-19", 309], ["06-20", 206], ["06-21", 137], ["06-22", 128], ["06-23", 85], ["06-24", 94], ["06-25", 71], ["06-26", 106], ["06-27", 84], ["06-28", 93], ["06-29", 85], ["06-30", 73], ["07-01", 83], ["07-02", 125], ["07-03", 107], ["07-04", 82], ["07-05", 44], ["07-06", 72], ["07-07", 106], ["07-08", 107], ["07-09", 66], ["07-10", 91], ["07-11", 92], ["07-12", 113], ["07-13", 107], ["07-14", 131], ["07-15", 111], ["07-16", 64], ["07-17", 69], ["07-18", 88], ["07-19", 77], ["07-20", 83], ["07-21", 111], ["07-22", 57], ["07-23", 55], ["07-24", 60]];
const dateList = data.map(function (item) {
  return item[0]
})
const valueList = data.map(function (item) {
  return item[1]
})
const option = ref({
  // Make gradient line here
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    data: dateList,
    axisLabel: {
      // rotate: 45,
      interval: 5,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#eaeaec'],
        width: 1,
        type: 'dashed',
      },
    },
  },
  yAxis: {
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#eaeaec'],
        width: 1,
        type: 'dashed',
      },
    },
  },
  grid: {
    left: 20,
    right: 20,
    bottom: 20,
    top: 20,
    containLabel: true,
  },
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
    },
  ],
})
</script>
